<!-- 根据kindeditor文档，上传文件接口 请返回{error:0,url:"图片地址，多个就逗号分隔"} 具体查询kindeditor文档吧 失败{error:1,message:""错误原因} -->
<template>
  <div class="mc-kindeditor-container" ref="container">
      <textarea class="mc-kindeditor" :id="myId" v-model="myContent"></textarea>
  </div>
</template>

<script>
/*随机生成一段字符串用作id*/
var pubGenerateClearUUID=function () {
    var d = new Date().getTime();
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (d + Math.random()*16)%16 | 0;
        d = Math.floor(d/16);
        return (c=='x' ? r : (r&0x3|0x8)).toString(16);
    });
    return uuid;
}
export default {
  name: 'mc-kindeditor',
  data () {
    return {
       /*作为富文本的同步变量名*/
       myContent: this.data,
       /*预定义的富文本实例*/
       myKindEditor:null,
       /*富文本初始需要ID*/
       myId:this.id||pubGenerateClearUUID()
    }
  },
  /*定义富文本组件的基础属性*/
  props: ['id','data','fileUpload'],
  watch:{
      data(html){
          if(typeof html =='undefined'){
              this.myKindEditor.html("")
              return;
          }
          //父亲变更
          this.myKindEditor && html !== this.myContent && this.myKindEditor.html(html);
      }
  },
  mounted () {
      /*获取高度*/
      var height = this.$refs.container.style.height;
      var _t = this;
      var request = this.$magicaltool.request;
      var url = this.fileUpload;//给个默认地址
      if(!url){
          url = "magical_lowcode/manager/web/upload?prefix=admin&from=kindeditor";
      }
      url = request.util.wrapCtxPath(url);
      /*调研富文本初始化方法*/
      _t.myKindEditor = KindEditor.create('#'+this.myId,{
        width: '100%',
        height: height||'600px',
        uploadJson : url,
        allowFileManager : false,
        allowImageUpload : true,
        filePostName:"file",
        /*当富文本内容变更时操作*/
        afterChange : function() {
          /*当前html*/
          var html = this.html();
          /*同步一下*/
          _t.myContent = html;
          //通知父亲组件 值变了 并且调用父组件方法
          _t.$emit('update:data', html);
          _t.$emit("on-change",html);
        }
    });
  }
}
</script>

<style lang="scss">
.magicalcoder-dragging .mc-kindeditor-container{
  padding:10px;
  border:1px solid grey;
}
</style>
